<template>
  <scroll-view scroll-y style="height: 100%">
    <view class='Kemu2-container'>
      <view class="icon-header-container">
        <view class="item" v-for="icon in icons" :key="icon.icon" @click="toView(icon)">
          <image class="icon" :src="icon.icon"></image>
          <text class="text">{{ icon.label }}</text>
        </view>
      </view>
      <view class="body-container">
        <view class="flex-row label-container align-center justify-between">
          <view class="main-label">{{ kemuStr }}考试项目解析</view>
          <!--          <view class="all">查看全部</view>-->
        </view>
        <view class="videos-container">
          <view class="video-container" v-for="item in list" :key="item.id" @click="toDetail(item.id)">
            <image class="cover" :src="item.coverUrl" mode="aspectFill"></image>
            <text class="label">{{ item.title }}</text>
            <view v-if="item.free !== 1" class="vip">{{ item.free === 0 ? '试看' : 'VIP'}}</view>
          </view>
        </view>
      </view>
      <view style="height: 200rpx"></view>
    </view>
  </scroll-view>
</template>
<script>
import {courseApi} from "@/api";

export default {
  name: "Kemu2",
  props: ['kemu'],
  data() {
    return {
      list: []
    }
  },
  computed: {
    kemuStr() {
      if (this.kemu === 2) {
        return '科二'
      }
      return '科三'
    },
    icons() {
      if (this.kemu === 2)
        return [
          {
            icon: '/static/kemu23/icon1.png',
            label: '考试标准',
            url: 'https://down.qwdata.vip/html/standard_kemu2.html'
          },
          {
            icon: '/static/kemu23/icon2.png',
            label: '考前必看',
            url: 'https://down.qwdata.vip/html/matter_kemu2.html'
          },
          {
            icon: '/static/kemu23/icon3.png',
            label: '考试流程',
            url: 'https://down.qwdata.vip/html/process_kemu2.html'
          }
        ]
      return [
        {
          icon: '/static/kemu23/icon1.png',
          label: '考试标准',
          url: 'https://down.qwdata.vip/html/standard_kemu3.html'
        },
        {
          icon: '/static/kemu23/icon2.png',
          label: '考前必看',
          url: 'https://down.qwdata.vip/html/matter_kemu3.html'
        },
        {
          icon: '/static/kemu23/icon3.png',
          label: '考试流程',
          url: 'https://down.qwdata.vip/html/process_kemu3.html'
        }
      ]
    },
    courseId() {
      if (this.kemu === 2) {
        return 'QNW000001'
      }

      return 'QNW000002'
    }
  },
  async mounted() {
    const res2 = await courseApi.info(this.courseId)
    this.list = res2.data.data.contents
  },
  methods: {
    toDetail(id) {
      uni.navigateTo({
        url: '/pages/course_video/course_video?courseId=' + this.courseId + '&contentId=' + id
      })
    },
    toView(data) {
      // const url = encodeURIComponent(data.url+'?t='+Date.now())
      const url = data.url

      uni.navigateTo({
        url: '/pages/webview/webview?url=' + url + '&title=' + data.label
      })
    }
  }
}
</script>
<style scoped lang="scss">
.Kemu2-container {
  padding-bottom: 100rpx;

  .icon-header-container {
    display: flex;

    .item {
      display: flex;
      flex-direction: column;
      flex: 1;
      justify-content: center;
      align-items: center;
      height: 250rpx;

      .icon {
        width: 100rpx;
        height: 112rpx;
      }

      .text {
        font-size: 28rpx;
        color: rgba(102, 102, 102, 1);
      }
    }
  }
  .body-container {
    .label-container {
      margin-bottom: 10upx;
      .main-label {
        font-size: 32upx;
        font-weight: bold;
        color: #000;
        margin-left: 32upx;
      }
      .all {
        font-size: 30upx;
        color: #959595;
        margin-right: 36upx;
        font-family: PingFangSC-Regular;
      }
    }

    .videos-container {
      display: flex;
      flex-wrap: wrap;
      padding-left: 21upx;

      .video-container {
        margin-left: 15upx;
        margin-right: 15upx;
        display: flex;
        flex-direction: column;
        margin-top: 30rpx;
        position: relative;

        .cover {
          width: calc((100vw - 102upx) / 2);
          height: 216rpx;
          border-radius: 24upx;
        }

        .label {
          margin-top: 16upx;
          font-size: 28upx;
          color: rgba(53, 60, 90, 1);
          font-weight: bold;
        }
        .vip {
          position: absolute;
          background-image: linear-gradient(112deg, #141819 0%, #1B2229 44%, #2B313E 100%);
          color: #FFE7BB;
          right: 10rpx;
          top: 10rpx;
          font-size: 12px;
          padding: 8rpx 20rpx;
          border-radius: 10rpx;
        }
      }
    }
  }
}
</style>
